<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东放大镜</title>
  <style>
    .box {
      width: 450px;
      height: 450px;
      border: 1px solid #ccc;
      float: left; /*设置浮动使得两个盒子在一排显示*/
      position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
      margin: 10px;
    }

    .big {
      width: 600px;
      height: 600px;
      overflow: hidden;/*超出部分隐藏*/
      border: 1px solid #ccc;
      position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
      display: none;/*默认不显示 鼠标经过box时显示*/
    }

    .mask {
      width: 300px;
      height: 300px;
      background-color: yellow;
      position: absolute;/*在box类里面定位 层级高于展示图*/
      top: 0px;
      left: 0px;
      opacity: .5;/*设置遮罩层的透明度*/
      cursor: move;/*鼠标经过的时候变成十字拖动样式*/
      display: none;/*默认不显示 鼠标经过box时显示*/
    }

    .img {
      position: absolute;/*在big盒子里面绝对定位*/
      /*JavaScript需要赋值需要设置top和left值*/
      top: 0px;
      left: 0px;

    }
  </style>
</head>

<body>
<div class="box">
  <img src="FDJ.jpg" alt="">
  <div class="mask"></div>
</div>

<div class="big">
  <img src="FDJ%20-%20副本.jpg" alt="" class="img">
</div>

<script>
  var mask = document.querySelector('.mask');
  var box = document.querySelector('.box');
  var big = document.querySelector('.big');
  var img = document.querySelector('.img');

  box.addEventListener('mouseover', function () {
    mask.style.display = 'block';
    big.style.display = 'block';

  });

  box.addEventListener('mouseout', function () {
    mask.style.display = 'none';
    big.style.display = 'none';
  });

  box.addEventListener('mousemove', function (e) {

    //得到的x和y是鼠标在盒子内的坐标  this指向box
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    //将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;


    //设置最大移动距离
    var maskWidth = box.offsetWidth - mask.offsetWidth;
    var maskHeight = box.offsetHeight - mask.offsetHeight;
    //控制mask移动的范围
    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= maskWidth) {
      maskX = maskWidth;
    }

    if (maskY <= 0) {
      maskY = 0;
    } else if (maskY >= maskHeight) {
      maskY = maskHeight;
    }
    mask.style.left = maskX + 'px';
    mask.style.top = maskY + 'px';

    //大图最大移动距离
    var imgWidth = img.offsetWidth - big.offsetWidth;
    var imgHeight = img.offsetHeight - big.offsetHeight;

    //大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离
    var bigX = maskX * imgWidth / maskWidth;
    var bigY = maskY * imgHeight / maskHeight;

    //赋值
    img.style.left = (-bigX) + 'px';
    img.style.top = (-bigY) + 'px';

  });

</script>


</body>

</html>